<template>
  <n-modal style="width: 600px;" v-model:show="curShow" preset="card"
           @after-enter="getInfo">
    <div>
      <slot name="head"></slot>
    </div>
    <div style="display: flex;flex: 1;justify-content: center">
      <n-form ref="formRef" :model="form" :rules="rules">
        <n-form-item label="日期时间:" required>
          <n-date-picker v-model:value="form.range" type="datetimerange" clearable/>
        </n-form-item>
        <n-form-item label="护士" path="nurse">
          <FreeNurseSelect v-model:option="form.nurse"
                           v-model:start="form.range[0]"
                           v-model:end="form.range[1]"></FreeNurseSelect>
        </n-form-item>
      </n-form>
    </div>
    <template #footer>
      <div>
        <slot name="tail"></slot>
      </div>
      <div style="text-align: center">
        <n-button style="width: 40%;margin: 5px" type="success" @click="confirm">确认</n-button>
        <n-button style="width: 40%;margin: 5px" type="error" @click="curShow=false"> 取消</n-button>
      </div>
    </template>

  </n-modal>
</template>

<script setup lang="ts">
import {computed, ref} from "vue";
import FreeNurseSelect from "@/components/example/select/FreeNurseSelect.vue";
import api from "@/api";
import myMoment from "@/utils/common/myMoment";

const props = defineProps({
  data: {
    type: Object,
    default: {}
  },
  show: {
    type: Boolean,
    default: false
  }
})
const formRef = ref()
const form = ref({
  range: [myMoment(props.data.start).valueOf(), myMoment(props.data.end).valueOf()],
  nurse: '',
})
const rules = ref({
  range: [{
    required: true,
    message: '请选择时间',
    trigger: ['input']
  }],
  nurse: [{
    required: true,
    message: '请选择排班医护人员',
    trigger: ['input']
  }],
})
const emits = defineEmits(['update:show', 'update:data', 'onConfirm'])
const getInfo = () => {
  if (props.data.extendedProps) {
      console.log('extendedProps',props.data.extendedProps)
    form.value.nurse = JSON.stringify(props.data.extendedProps)
  }
  form.value.range = [myMoment(props.data.start).valueOf(), myMoment(props.data.end).valueOf()]
}
const addSchedule = () => {
  formRef.value.validate((error: any) => {
    if (!error) {
      let tmp = JSON.parse(form.value.nurse)
      api.schedule.add({
        username: tmp?.username,
        avatar:tmp?.avatar,
        jobNum: tmp?.jobNum,
        nurseName: tmp?.name,
        hospital:tmp?.hospital,
        start: myMoment(form.value.range[0]).format("yyyy-MM-DD HH:mm:ss"),
        end: myMoment(form.value.range[1]).format("yyyy-MM-DD HH:mm:ss")
      }).then(res => {
        if (res && res.data.code === 0) {
          window.$message.success(res.data.msg)
          curShow.value = false
          emits("onConfirm")
        }
      })
    }
  })
}

const updateSchedule = () => {
  let tmp = JSON.parse(form.value.nurse)
  api.schedule.update({
    id: props.data.extendedProps.id,
    username: tmp?.username || props.data.extendedProps.username,
    jobNum: tmp?.jobNum || props.data.extendedProps.jobNum,
    nurseName: tmp?.name || props.data.extendedProps.name,
    avatar: tmp?.avatar || props.data.extendedProps.avatar,
    start: myMoment(form.value.range[0]).format("yyyy-MM-DD HH:mm:ss"),
    end: myMoment(form.value.range[1]).format("yyyy-MM-DD HH:mm:ss")
  }).then(res => {
    if (res && res.data.code === 0) {
      window.$message.success(res.data.msg)
      curShow.value = false
      emits("onConfirm")
    }
  })
}
const confirm = () => {
  if (props.data.extendedProps) {
    updateSchedule()
  } else {

    addSchedule()
  }
}
const curShow = computed({
  get() {
    return props.show
  },
  set(val) {
    emits('update:show', val)
  }
})
</script>

<style scoped>

</style>